<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-page-container">
  <h1>Password policy</h1>
  <div>
    <div fxFlex="70">
      <form (ngSubmit)="update()" (keydown.enter)="false" fxLayout="column" #applicationForm="ngForm">
        <div *ngIf="editMode">
          <div class="gv-form-section">
            <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 20px;">
              <mat-form-field appearance="outline" floatLabel="always">
                <mat-label>Minimum length</mat-label>
                <input matInput type="number" name="minLength" [(ngModel)]="minLength" [min]="0" [max]="maxLength" (ngModelChange)="formChange()">
                <mat-hint>Minimum length of the passwords. Passwords shorter than 8 characters are considered to be weak (OWASP recommendation).</mat-hint>
              </mat-form-field>

              <mat-form-field appearance="outline" floatLabel="always">
                <mat-label>Maximum length</mat-label>
                <input matInput type="number" name="maxLength" [(ngModel)]="maxLength" [min]="minLength" (ngModelChange)="formChange()">
                <mat-hint>Maximum length of the passwords. A common maximum length is 64 characters due to limitations in certain hashing algorithms (OWASP recommendation).</mat-hint>
              </mat-form-field>
            </div>

            <mat-form-field appearance="outline" floatLabel="always" style="margin-top: 5px;">
              <mat-label>Max consecutive letters</mat-label>
              <mat-select [(value)]="maxConsecutiveLetters" (selectionChange)="formChange()">
                <mat-option [value]="null">Unlimited</mat-option>
                <mat-option *ngFor="let p of [1,2,3,4,5]" [value]=p>{{p}}</mat-option>
              </mat-select>
              <mat-hint>Max number of consecutive letters.</mat-hint>
            </mat-form-field>

            <div fxLayout="column" style="margin-top: 5px;">
              <mat-slide-toggle [checked]="includeNumbers" (change)="setIncludeNumbers($event);formChange()">
                Include numbers
              </mat-slide-toggle>
              <mat-hint style="font-size: 75%;">Must include numbers.</mat-hint>
            </div>

            <div fxLayout="column" style="margin-top: 5px;">
              <mat-slide-toggle [checked]="includeSpecialCharacters" (change)="setIncludeSpecialCharacters($event);formChange()">
                Include special characters
              </mat-slide-toggle>
              <mat-hint style="font-size: 75%;">Must include special characters.</mat-hint>
            </div>

            <div fxLayout="column" style="margin-top: 5px;">
              <mat-slide-toggle [checked]="lettersInMixedCase" (change)="setLettersInMixedValue($event);formChange()">
                Letters in mixed case
              </mat-slide-toggle>
              <mat-hint style="font-size: 75%;">Must include letters in mixed case.</mat-hint>
            </div>
            <div fxLayout="column" style="margin-top: 5px;">
              <mat-slide-toggle [checked]="excludePasswordsInDictionary" (change)="setExcludePasswordsInDictionary($event);formChange()">
                Exclude common passwords
              </mat-slide-toggle>
              <mat-hint style="font-size: 75%;">Will exclude common unsafe passwords (e.g: <i>123456</i>, <i>qwertyuiop</i>, <i>trustno1</i>, ...).</mat-hint>
            </div>
          </div>
          <div fxLayout="row">
            <button mat-raised-button [disabled]="(!applicationForm.valid || applicationForm.pristine) && !formChanged" type="submit">
              SAVE
            </button>
          </div>
        </div>
      </form>
    </div>
    <div class="gv-page-description" fxFlex>
      <h3>Password policy</h3>
      <div class="gv-page-description-content">
        <p>
          Update password criteria.
        </p>
      </div>
    </div>
  </div>
</div>
